<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>预览&构建&部署 | 宋承昊的博客</title>
    <meta name="description" content="一个开箱即用web移动端组件">
    <link rel="stylesheet" href="/so/assets/style.63d62946.css">
    <link rel="modulepreload" href="/so/assets/Home.e186d856.js">
    <link rel="modulepreload" href="/so/assets/app.c6d2fa4d.js">
    <link rel="modulepreload" href="/so/assets/guide_deploy.md.4fd4708d.lean.js">
    <link rel="modulepreload" href="/so/assets/app.c6d2fa4d.js">
    <meta name="author" content="Vbenjs Team">
    <meta name="keywords" content="vben, vitejs, vite, ant-design-vue, vue">
    <link rel="icon" type="image/svg+xml" href="/logo.svg">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="vue vben admin docs">
    <link rel="icon" href="/favicon.ico">
    <meta name="twitter:title" content="预览&amp;构建&amp;部署 | 宋承昊的博客">
    <meta property="og:title" content="预览&amp;构建&amp;部署 | 宋承昊的博客">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-016e0934><div class="sidebar-button" data-v-016e0934><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/so/" aria-label="宋承昊的博客, back to home" data-v-016e0934 data-v-707ed49a><img class="logo" src="/so/logo.png" alt="Logo" data-v-707ed49a><!-- {{ $site.title }} --><text style="margin-top:-1px;" data-v-707ed49a>宋承昊 | 官方文档</text></a><div class="flex-grow" data-v-016e0934></div><div class="nav" data-v-016e0934><nav class="nav-links" data-v-016e0934 data-v-1e870408><!--[--><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/guide/introduction" data-v-c272f228>生活 <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/components/mapLocus" data-v-c272f228>技术 <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>友情链接</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/so/other/see" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>友情链接</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://echoyuyu.github.io/" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>我的简历</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="http://echoyuyu.gitee.io/so" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>项目源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://gitee.com/echoyuyu/song/stargazers" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>点赞支持</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/other/donate" data-v-c272f228>赞助 <!----></a></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav></div><div class="nav-icons" data-v-016e0934><div class="item" data-v-016e0934><button class="nav-btn" aria-label="Toggle Theme" data-v-016e0934><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style="display:none;"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style=""><path d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"></path></svg></button></div><div class="item" data-v-016e0934><a class="nav-btn" href="https://gitee.com/kevin_chou/qdpz" target="_blank" aria-label="View GitHub Repo" data-v-016e0934><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-016e0934><path d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z" fill="currentColor"></path></svg></a></div></div><!--[--><!--]--></header><!--[--><aside class="sidebar" data-v-4668b452><nav class="nav-links nav" data-v-4668b452 data-v-1e870408><!--[--><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/guide/introduction" data-v-c272f228>生活 <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/components/mapLocus" data-v-c272f228>技术 <!----></a></div></div><div class="item" data-v-1e870408><div class="nav-dropdown-link" data-v-1e870408 data-v-312de885><button class="button" data-v-312de885><span class="button-text" data-v-312de885>友情链接</span><span class="right button-arrow" data-v-312de885></span></button><ul class="dialog" data-v-312de885><!--[--><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item" href="/so/other/see" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>友情链接</span><span class="icon" data-v-7b16fcd4><!----></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://echoyuyu.github.io/" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>我的简历</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="http://echoyuyu.gitee.io/so" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>项目源码</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-312de885><div class="nav-dropdown-link-item" data-v-312de885 data-v-7b16fcd4><a class="item isExternal" href="https://gitee.com/echoyuyu/song/stargazers" target="_blank" rel="noopener noreferrer" data-v-7b16fcd4><span class="arrow" data-v-7b16fcd4></span><span class="text" data-v-7b16fcd4>点赞支持</span><span class="icon" data-v-7b16fcd4><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7b16fcd4><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-1e870408><div class="nav-link" data-v-1e870408 data-v-c272f228><a class="item" href="/so/other/donate" data-v-c272f228>赞助 <!----></a></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav><!--[--><!--]--><ul class="sidebar-links" data-v-4668b452><!--[--><li class="sidebar-link"><p class="sidebar-link-item">基础</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/so/guide/">拍照</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/so/guide/settings">支付宝黄金卖出规则</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/so/guide/mock">济南今日天气</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-7abc59e6><div class="container" data-v-7abc59e6><!--[--><!--]--><div class="content" data-v-7abc59e6><div data-v-7abc59e6><h1 id="预览-构建-部署"><a class="header-anchor" href="#预览-构建-部署" aria-hidden="true">#</a> 预览&amp;构建&amp;部署</h1><div class="tip custom-block"><p class="custom-block-title">前言</p><p>uni-app支持通过 <strong>可视化界面</strong> 、<strong>vue-cli命令行</strong> 两种方式快速创建项目</p><p>由于宋承昊的博客是开源项目，所以已经去除掉了项目中的 <a href="https://gitee.com/kevin_chou/qdpz/blob/develop/manifest.json" target="_blank" rel="noopener noreferrer">AppID</a>， 故无法打包小程序，如您需要打包请申请小程序AppID。</p></div><h2 id="通过可视化方式"><a class="header-anchor" href="#通过可视化方式" aria-hidden="true">#</a> 通过可视化方式</h2><p>开始之前，开发者需先下载安装如下工具：</p><ul><li>HBuilderX：<a href="https://www.dcloud.io/hbuilderx.html" target="_blank" rel="noopener noreferrer">官方IDE下载地址</a></li></ul><p>HBuilderX是通用的前端开发工具，但为uni-app做了特别强化</p><p>下载App开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用</p><h3 id="运行uni-app"><a class="header-anchor" href="#运行uni-app" aria-hidden="true">#</a> 运行uni-app</h3><ul><li><strong>浏览器运行</strong> ：进入hello-uniapp项目，点击工具栏的运行 -&gt; 运行到浏览器 -&gt; 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版</li></ul><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/1ad34710-4f1a-11eb-8ff1-d5dcf8779628.png" width="40%"><ul><li><strong>真机运行</strong> ：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -&gt; 真机运行 -&gt; 选择运行的设备，即可在该设备里面体验uni-app</li></ul><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/3a1faaf0-4f1a-11eb-b680-7980c8a877b8.png" width="40%"><p>如 <code>手机无法识别</code>，请点击菜单运行-运行到手机或模拟器-真机运行常见故障排查指南。 注意目前开发App也需要安装微信开发者工具</p><ul><li><strong>在微信开发者工具里运行</strong> ：进入hello-uniapp项目，点击工具栏的运行 -&gt; 运行到小程序模拟器 -&gt; 微信开发者工具，即可在微信开发者工具里面体验uni-app</li></ul><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d89fd6f0-4f1a-11eb-97b7-0dc4655d6e68.png" width="40%"><div class="warning custom-block"><p class="custom-block-title">注意事项</p><p>如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。</p></div><p>uni-app默认把项目编译到根目录的unpackage目录</p><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a142b6a0-4f1a-11eb-8a36-ebb87efcf8c0.png" width="100%"><ul><li><strong>支付宝小程序开发者工具里运行</strong> ：进入hello-uniapp项目，点击工具栏的运行 -&gt; 运行到小程序模拟器 -&gt; 支付宝小程序开发者工具，即可在支付宝小程序开发者工具里面体验uni-app</li></ul><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/fee90480-4f1a-11eb-bd01-97bc1429a9ff.png" width="40%"><ul><li>在 <strong><code>百度开发者工具</code>、<code>字节跳动开发者工具</code>、<code>快应用联盟</code>、<code>华为开发者工具</code>、<code>QQ小程序</code></strong>、开发工具里运行：内容同上，不再重复。</li></ul><div class="warning custom-block"><p class="custom-block-title">注意事项</p><ul><li>如果是第一次使用，需要配置开发工具的相关路径。点击工具栏的运行 -&gt; 运行到小程序模拟器 -&gt; 运行设置，配置相应小程序开发者工具的路径</li><li>支付宝/百度/字节跳动/360小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开</li><li>如果自动启动小程序开发工具失败，请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径，打开项目</li></ul></div><h3 id="打包uni-app"><a class="header-anchor" href="#打包uni-app" aria-hidden="true">#</a> 打包uni-app</h3><ul><li><strong>打包为原生App：</strong> 在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：</li></ul><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/b8332fd0-4f37-11eb-8ff1-d5dcf8779628.png" width="24%"><p>出现如下界面，点击打包即可</p><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/001a20b0-d85a-11ea-81ea-f115fe74321c.png" width="40%"><ul><li><strong>打包为H5：</strong> 在 manifest.json 的可视化界面，进行如下配置（发行在网站根目录可不配置应用基本路径），此时发行网站路径是 <a href="http://www.xxx.com/h5%EF%BC%9A" target="_blank" rel="noopener noreferrer">www.xxx.com/h5：</a></li></ul><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/bf90de30-4f37-11eb-8ff1-d5dcf8779628.png" width="40%"><p>在HBuilderX工具栏，点击发行，选择网站-H5手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录</p><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/b7391860-4f37-11eb-8a36-ebb87efcf8c0.png" width="24%"><div class="warning custom-block"><p class="custom-block-title">注意事项</p><ul><li>history 模式发行需要后台配置支持，详见：<a href="https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90" target="_blank" rel="noopener noreferrer">history模式的后端配置</a></li><li>打包部署后，在服务器上开启 gzip 可以进一步压缩文件。具体的配置，可以参考网上的分享：<a href="https://juejin.im/post/5af003286fb9a07aac24611b" target="_blank" rel="noopener noreferrer">https://juejin.im/post/5af003286fb9a07aac24611b</a></li></ul></div><ul><li><strong>打包为微信小程序：</strong></li></ul><ol><li>申请微信小程序AppID，参考：<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7" target="_blank" rel="noopener noreferrer">微信教程</a></li><li>在HBuilderX中顶部菜单依次点击 &quot;发行&quot; =&gt; &quot;小程序-微信&quot;，输入小程序名称和appid点击发行即可在 <strong><code>unpackage/dist/build/mp-weixin</code></strong> 生成微信小程序项目代码</li></ol><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/b36294f0-4f37-11eb-8a36-ebb87efcf8c0.png" width="50%"><ol start="3"><li>在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” =&gt; “发布” 小程序标准流程，逐步操作即可，详细查看：<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/release.html#%E5%8F%91%E5%B8%83%E4%B8%8A%E7%BA%BF" target="_blank" rel="noopener noreferrer">微信官方教程</a>。</li></ol><ul><li>在 <strong><code>百度开发者工具</code>、<code>字节跳动开发者工具</code>、<code>快应用联盟</code>、<code>华为开发者工具</code>、<code>QQ小程序</code></strong> 发布：内容基本同上，不再重复。</li></ul><h2 id="通过vue-cli命令行"><a class="header-anchor" href="#通过vue-cli命令行" aria-hidden="true">#</a> 通过vue-cli命令行</h2><p><strong>除了HBuilderX可视化界面，也可以使用 <code>cli</code> 脚手架，可以通过 <code>vue-cli</code> 创建 <code>uni-app</code> 项目</strong></p><h3 id="环境安装"><a class="header-anchor" href="#环境安装" aria-hidden="true">#</a> 环境安装</h3><p>全局安装vue-cli</p><div class="language-"><pre><code>npm install -g @vue/cli
</code></pre></div><h3 id="运行、发布uni-app"><a class="header-anchor" href="#运行、发布uni-app" aria-hidden="true">#</a> 运行、发布uni-app</h3><div class="language-"><pre><code>npm run dev:%PLATFORM%
npm run build:%PLATFORM%
</code></pre></div><p><code>%PLATFORM%</code> 可取值如下：</p><table><thead><tr><th style="text-align:center;"><strong>值</strong></th><th style="text-align:center;"><strong>平台</strong></th></tr></thead><tbody><tr><td style="text-align:center;">app-plus</td><td style="text-align:center;">app平台生成打包资源（支持npm run build:app-plus，可用于持续集成。不支持run，运行调试仍需在HBuilderX中操作）</td></tr><tr><td style="text-align:center;">h5</td><td style="text-align:center;">H5</td></tr><tr><td style="text-align:center;">mp-alipay</td><td style="text-align:center;">支付宝小程序</td></tr><tr><td style="text-align:center;">mp-baidu</td><td style="text-align:center;">百度小程序</td></tr><tr><td style="text-align:center;">mp-weixin</td><td style="text-align:center;">微信小程序</td></tr><tr><td style="text-align:center;">mp-toutiao</td><td style="text-align:center;">字节跳动小程序</td></tr><tr><td style="text-align:center;">mp-qq</td><td style="text-align:center;">QQ 小程序</td></tr><tr><td style="text-align:center;">mp-360</td><td style="text-align:center;">360 小程序</td></tr><tr><td style="text-align:center;">mp-kuaishou</td><td style="text-align:center;">快手小程序</td></tr><tr><td style="text-align:center;">quickapp-webview</td><td style="text-align:center;">快应用(webview)</td></tr><tr><td style="text-align:center;">quickapp-webview-union</td><td style="text-align:center;">快应用联盟</td></tr><tr><td style="text-align:center;">quickapp-webview-huawei</td><td style="text-align:center;">快应用华为</td></tr></tbody></table><p>可以自定义更多条件编译平台，比如钉钉小程序，参考<a href="https://uniapp.dcloud.io/collocation/package" target="_blank" rel="noopener noreferrer">package.json文档</a>。</p><h4 id="运行并发布快应用："><a class="header-anchor" href="#运行并发布快应用：" aria-hidden="true">#</a> 运行并发布快应用：</h4><p>快应用有两种开发方式，uni-app均支持：</p><ul><li>类小程序webview渲染方式：<a href="https://ask.dcloud.net.cn/article/37182" target="_blank" rel="noopener noreferrer">https://ask.dcloud.net.cn/article/37182</a></li><li>原生渲染方式：<a href="https://ask.dcloud.net.cn/article/37145" target="_blank" rel="noopener noreferrer">https://ask.dcloud.net.cn/article/37145</a></li></ul><div class="warning custom-block"><p class="custom-block-title">注意事项</p><ul><li><p>目前使用<code>npm run build:app-plus</code>会在 <code>/dist/build/app-plus</code> 下生成app打包资源。如需制作wgt包，将 <code>app-plus</code> 中的文件压缩成zip（注意：不要包含 <code>app-plus目录</code> ），再重命名为 <code>${appid}.wgt</code> ， <code>appid</code> 为 <code>manifest.json</code> 文件中的 <code>appid</code>。</p></li><li><p>dev 模式编译出的各平台代码存放于根目录下的 <code>/dist/dev/</code> 目录，打开各平台开发工具选择对应平台目录即可进行预览（h5 平台不会在此目录，存在于缓存中）；</p></li><li><p>build 模式编译出的各平台代码存放于根目录下的 <code>/dist/build/</code> 目录，发布时选择此目录进行发布；</p></li><li><p>dev 和 build 模式的区别：</p><p>1.dev 模式有 SourceMap 可以方便的进行断点调试；</p><p>2.build 模式会将代码进行压缩，体积更小更适合发布为正式版应用；</p><p>3.进行 环境判断 时，dev 模式 process.<wbr>env.NODE_ENV 的值为 development，build 模式 process.<wbr>env.NODE_ENV 的值为 production。</p></li></ul></div></div></div><footer class="page-footer" data-v-7abc59e6 data-v-22e60b1a><div class="edit" data-v-22e60b1a><div class="edit-link" data-v-22e60b1a data-v-045573c2><a class="link" href="https://github.com/echoyuyu/edit/main/guide/deploy.md" target="_blank" rel="noopener noreferrer" data-v-045573c2>为此页提供修改建议 <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-045573c2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-22e60b1a><!----></div></footer><!----><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"cea1f6db\",\"readme.md\":\"ed280d6c\",\"components_camera.md\":\"3226f6e5\",\"components_chat.md\":\"a0237134\",\"components_cssdiscern.md\":\"8eeaa5a1\",\"components_csslogin.md\":\"4ae91895\",\"components_cssrankinglist.md\":\"76b68561\",\"components_keyboard.md\":\"63ecd8f1\",\"components_maplocus.md\":\"dc370285\",\"components_pay_matting.md\":\"b7c287c3\",\"components_pay_poster.md\":\"0b318d55\",\"components_ucharts.md\":\"0519e4b1\",\"components_wz3.md\":\"11d68880\",\"components_wz4.md\":\"e7766dcf\",\"components_wz5.md\":\"2afcbf2d\",\"guide_component.md\":\"6680ce7a\",\"guide_deploy.md\":\"4fd4708d\",\"guide_design.md\":\"ab9d5190\",\"guide_index.md\":\"7a509e98\",\"guide_introduction.md\":\"4dc4d99c\",\"guide_mock.md\":\"32cb9f20\",\"guide_router.md\":\"67abd7df\",\"guide_settings.md\":\"22f60ab3\",\"other_donate.md\":\"8416981e\",\"other_see.md\":\"419ca5c8\",\"other_wz1.md\":\"1c5a99f7\",\"other_wz2.md\":\"a4be2470\"}")</script>
    <script type="module" async src="/so/assets/app.c6d2fa4d.js"></script>
  </body>
</html>